<template>
	<view class="person ">
		<watermark></watermark>
		<view class="zyjz selector center">
			<view class="selector-li left-radius" :class="{active:tab==='审核中'}" @click="changeTab('审核中')">
				审核中
			</view>
			<view class="selector-li" :class="{active:tab==='使用中'}" @click="changeTab('使用中')">
				使用中
			</view>
			<view class="selector-li right-radius" :class="{active:tab==='已归还'}" @click="changeTab('已归还')">
				已归还
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="getMore">
			<view class="mgn-b-30 bgfff" v-if="tab==='使用中'">
				<view class="goods  zyjz f26 cl343 flex-start-c " v-for="(item,int) in items" :key="int">
					<image :src="item.img" mode="widthFix"></image>
					<view class="mgn-l-20" style="width:68%">
						<view class="omit1">
							{{item.goods_name}}
						</view>
						<view class="zyjz">
							<view class="cl343 mgn-t-30 mgn-b-30">
								{{item.num}}
							</view>
							<view class="mgn-l-30">
								{{item.user_name}}
							</view>
						</view>


						<view class="clAAA">
							借时间：{{item.m_time}}
						</view>

					</view>
				</view>
			</view>
			<view class="zyjz list pad20" @click="gogo(item.id,item.type)" v-for="(item,int) in items" :key="int" v-else>
				<view class="time f20">
					<view class="mgn-t-10">
						{{item.d}}</br>
						{{item.m}}月
					</view>
				</view>
				<view class="mgn-l-20 f26">
					<view class="">
						班组：{{item.class_name}}
						<text class="mgn-l-60">{{item.user_name}}</text>
					</view>
					<view class="clAAA">
						物品：{{item.num}}件
					</view>
				</view>
			</view>
			<view class="" style="height: 200rpx;"></view>
		</scroll-view>

		<view class="bottom zyjz pad-l-40 pad-t-20 pad-b-20 pad-r-20 bgfff f28 cl343">
			<image style="width: 68rpx;height: 68rpx;" src="../../../static/logo.png" mode="widthFix">
			</image>
			<view class="mgn-l-30 mgn-r-75">
				<view class="">
					{{infoData.user_name}}
				</view>
				<view class="">
					{{infoData.mobile_phone}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import watermark from '@/components/watermark.vue'
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		components: {
			watermark
		},
		data() {
			return {
				tab: '审核中',

				lists_url: 'user_review',
				param: {
					page: 1,
					size: 20,
				},
				items: []
			}
		},
		onShow() {
			this.get_lists()
		},
		methods: {
			changeTab(e) {
				this.tab = e
				switch (e) {
					case '审核中':
						this.lists_url = 'user_review'
						break
					case '使用中':
						this.lists_url = 'user_useing'
						break
					case '已归还':
						this.lists_url = 'submit_returns'
						break
				}
				this.param.page = 1
				this.items = []
				this.get_lists();
			},
			gogo(id, type) {
				console.log(type);
				if (type === 'borrows') {
					this.go('/pages/person/commom/review?id=' + id)
				} else {
					this.go('./inUse?id=' + id)
				}

			}
		}
	}
</script>

<style lang="less">
	.person {
		.selector {

			.selector-li {
				padding: 15rpx 60rpx;
				background: #DDEBFF;
				border: 2rpx solid #3E86F4;
				font-size: 26rpx;
			}

			.left-radius {
				border-radius: 8rpx 0rpx 0rpx 8rpx;
			}

			.right-radius {
				border-radius: 0rpx 8rpx 8rpx 0rpx;
			}

			.active {
				background: #3E86F4;
				color: #fff;
			}
		}

		.list {
			border-bottom: 1px solid #f7f7f7;

			.time {
				width: 80rpx;
				height: 80rpx;
				vertical-align: middle;
				text-align: center;
				background: #DDEBFF;
				border-radius: 50%;
			}
		}

		.goods {
			position: relative;
			padding: 20rpx 0;
			margin: 0 20rpx;
			border-bottom: 1px solid #f7f7f7;

			.out {
				position: absolute;
				top: 20rpx;
				left: 0rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					position: absolute;
					top: 10rpx;
					left: 5rpx;
				}
			}

			image {
				width: 200rpx;
				height: 150rpx;
			}

			.clff0 {
				color: #FF0000;
			}
		}

	}
</style>